<template>
  <div class="p-6px">
    <el-card class="rounded-md" shadow="never">
      <!-- 搜索条件 -->
      <el-form v-show="showSearch" :inline="true" id="searchFormId" @submit.prevent>
        <ColeSearchRadioGroup
          label="订单类型"
          v-model:value="searchParams.type"
          :list="orderTextMap.type"
          @handleChange="handleListPage"
        />
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
            <el-form-item label="订单状态" prop="pay_way">
              <el-radio-group v-model="searchParams.status" size="small" @change="handleListPage">
                <div v-for="(item, _index) in orderTextMap.status" :key="_index">
                  <el-badge :value="statusBadgeMap[item.value]">
                    <el-radio-button :label="item.value">
                      {{ item.label }}
                    </el-radio-button>
                  </el-badge>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <ColeSearchRadioGroup
          label="支付状态"
          v-model:value="searchParams.pay_status"
          :list="orderTextMap.pay_status"
          @handleChange="handleListPage"
        />
        <ColeSearchRadioGroup
          label="支付方式"
          v-model:value="searchParams.pay_way"
          :list="orderTextMap.pay_way"
          @handleChange="handleListPage"
        />
        <el-form-item label="订单号" prop="username">
          <el-input placeholder="请输入订单号" v-model="searchParams.order_no" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="下单时间" prop="username">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            range-separator="至"
            end-placeholder="结束日期"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" plain v-debounce="handleSearch">搜索</el-button>
          <el-button type="danger" icon="refresh" plain v-throttle="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格头部按钮 -->
      <el-row :gutter="10">
        <el-button type="primary" icon="plus" plain @click="handleExport()">导出</el-button>
        <KoiToolbar v-model:showSearch="showSearch" @refresh-table="handleListPage"></KoiToolbar>
      </el-row>

      <br />
      <el-table v-loading="loading" v-adaptive border :data="tableList" empty-text="暂时没有数据哟">
        <el-table-column label="订单号" prop="order_no" width="200px" align="left" fixed="left" :show-overflow-tooltip="true">
          <template #default="scope">
            <div>{{ scope.row.order_no }}</div>
            <div>[{{ scope.row.type_text }}]</div>
          </template>
        </el-table-column>
        <el-table-column label="购买人" prop="order_no" width="120px" align="center" :show-overflow-tooltip="true">
          <template #default="scope">
            <div>{{ scope.row.user.nickname }}</div>
            <div>ID:{{ scope.row.user_id }}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" prop="order_no" width="400px" align="center">
          <template #default="scope">
            <div>
              <div v-for="(item, index) in scope.row.detail" :key="index" style="display: flex">
                <div>
                  <el-image
                    style="width: 84px; height: 84px"
                    :preview-teleported="true"
                    :preview-src-list="item.logo"
                    :src="item.logo"
                  >
                    <template #error>
                      <el-icon class="c-[--el-color-primary]" :size="36">
                        <CircleCloseFilled />
                      </el-icon>
                    </template>
                  </el-image>
                </div>
                <div>
                  <el-tooltip class="box-item" effect="dark" :content="item.goods_name" placement="top">
                    <div style="width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                      {{ item.goods_name }}
                    </div>
                  </el-tooltip>

                  <div>{{ item.sku_name }}</div>
                  <div style="color: #f56c6c">￥{{ item.price }} x {{ item.num }}</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="实际支付"
          prop="pay_price"
          width="120px"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="支付状态" prop="pay_status_text" align="center" :show-overflow-tooltip="true">
          <template #default="scope">
            <div>{{ scope.row.pay_status_text }}</div>
            <div v-if="scope.row.refund_status > 1" style="color: #f56c6c">{{ scope.row.refund_status_text }}</div>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" prop="status_text" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column
          label="支付时间"
          prop="pay_time"
          align="center"
          width="170px"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="下单时间"
          prop="create_time"
          align="center"
          width="170px"
          :show-overflow-tooltip="true"
        ></el-table-column>

        <el-table-column
          label="操作"
          align="left"
          width="130"
          fixed="right"
          v-auth="['system:role:update', 'system:role:delete']"
        >
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              size="small"
              v-if="[3, 5].includes(row.status)"
              plain
              @click="handleDeliver(row)"
              v-auth="['system:role:update']"
            >
              发货
            </el-button>
            <el-dropdown>
              <el-button link type="primary" size="small" plain style="margin-top: 3px">
                更多
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleDetail(row)">订单详情</el-dropdown-item>
                  <el-dropdown-item>状态日志</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 分页 -->
      <el-pagination
        background
        v-model:current-page="searchParams.pageNo"
        v-model:page-size="searchParams.pageSize"
        v-show="total > 0"
        :page-sizes="[10, 20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleListPage"
        @current-change="handleListPage"
      />

      <!-- 添加 OR 修改 -->
      <KoiDrawer ref="koiDrawerRef" title="发货" :confirmButtonHidden="true" @koi-cancel="handleCancel" :size="1500">
        <template #content>
          <Deliver :info="info"></Deliver>
        </template>
      </KoiDrawer>
      <KoiDrawer ref="koiDetailDrawerRef" title="订单详情" footer-hidden="true" :size="1500">
        <template #content>
          <Detail :info="info"></Detail>
        </template>
      </KoiDrawer>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="orderPage">
import { exportData, getStatusMap, listPage, read } from "@/api/order/order/index.ts";
import { koiDatePicker } from "@/utils/index.ts";
import { koiNoticeError } from "@/utils/koi.ts";
import { onMounted, ref } from "vue";
import Deliver from "./Deliver.vue";
import Detail from "./Detail.vue";
import { exportAction } from "@/utils/exportUtil";
// 数据表格加载页面动画
const loading = ref(false);
/** 是否显示搜索表单 */
const showSearch = ref<boolean>(true); // 默认显示搜索条件
// 数据表格数据
const tableList = ref<any>([]);
// 查询参数
const searchParams = ref({
  pageNo: 1, // 第几页
  pageSize: 10, // 每页显示多少条
  status: "",
  type: "",
  pay_status: "",
  pay_way: "",
  order_no: ""
});

const total = ref<number>(0);
const orderTextMap = ref<any>({});
const statusBadgeMap = ref<any>({});

// 重置搜索参数
const resetSearchParams = () => {
  searchParams.value = {
    pageNo: 1,
    pageSize: 10,
    status: "",
    type: "",
    pay_status: "",
    pay_way: "",
    order_no: ""
  };
};

/** 搜索 */
const handleSearch = () => {
  searchParams.value.pageNo = 1;
  handleListPage();
};

/** 重置 */
const resetSearch = () => {
  resetSearchParams();
  handleListPage();
};

// 时间
const dateRange = ref();
/** @current-change：点击分页组件页码发生变化：例如：切换第2、3页 OR 上一页 AND 下一页 OR 跳转某一页 */
/** @size-change：点击分页组件下拉选中条数发生变化：例如：选择10条/页、20条/页等 */
// 分页查询，@current-change AND @size-change都会触发分页，调用后端分页接口
/** 数据表格 */
const handleListPage = async () => {
  try {
    loading.value = true;
    tableList.value = []; // 重置表格数据
    const res: any = await listPage(koiDatePicker(searchParams.value, dateRange.value, "create"));
    tableList.value = res.data.records;
    total.value = res.data.total;
    statusBadgeMap.value = res.data.status_badge;
    loading.value = false;
  } catch (error) {
    console.log(error);
    koiNoticeError("数据查询失败，请刷新重试");
  }
};

onMounted(() => {
  // 获取数据表格数据
  handleOrderTextMap();
  handleListPage();
});
const handleOrderTextMap = async () => {
  getStatusMap().then((r: any) => (orderTextMap.value = r.data));
};

const koiDrawerRef = ref();
/** 取消 */
const handleCancel = () => {
  koiDrawerRef.value.koiClose();
};
const info = ref();
const koiDetailDrawerRef = ref();

const handleDetail = (row: any) => {
  read(row.id).then(res => {
    info.value = res.data;
    koiDetailDrawerRef.value.koiOpen();
  });
};

const handleDeliver = (row: any) => {
  read(row.id).then(res => {
    info.value = res.data;
    koiDrawerRef.value.koiOpen();
  });
};

const handleExport = () => {
  exportAction(() => exportData(searchParams.value));
};
</script>

<style lang="scss" scoped></style>
